<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CRM</title>
	<link rel="stylesheet" href="${basePath }/css/bootstraplan.css" />
	<link type="text/css" href="${basePath }/jquery-ui/css/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" /> 
	<link type="text/css" href="${basePath }/jquery-ui/css/ui-lightness/pack_datepicker.css" rel="stylesheet" /> 
	<style type="text/css">
		#bodycontent{
			margin-top:90px;
		}
		.activity{
			position:relative;
			margin-top:5px;
			margin-left:20px;
			height:100px;
			border-bottom:1px solid #eee;
		}
		.dealpic{
			position:absolute;
			width:55px;
			height:55px;
			background-position:-502px -56px;
			background-image:url(img/all.png);
		}
		.info{
			position:absolute;
			top:10px;
			left:70px;
		}
		.del{
			position:absolute;
			top:10px;
			left:400px;
			display:none;
		}
		#outer{
			position:relative;
			
		}
		#addtask{
			position:absolute;
			top:5px;
			left:120px;
		}
		.li{
			margin-left:5px;
			margin-right:5px;
		}
		.box{width:290px; height:380x; border:1px solid #d4693e; border-radius:5px; margin-top: 47px; position:absolute; background-color: #fff;top:0px;left:118px;}
        .a1,.a2{width:0; height:0; overflow:hidden; border-width:10px; border-style:dotted dotted solid;  position:absolute}
        .abox{position: absolute; width:20px; height: 20px; left:20px; top:-20px}
        .a1{border-color:transparent transparent #D4693E;  top:-1px}
        .a2{border-color:transparent transparent #FFFFFF;  top:0}
	</style>
</head>
<body>
	<div class="navbar navbar-fixed-top"  style="background-color:#085F8A">
		<div class="navbar-inner" style="height:80px">
			<div class="container">
				<div class="row">
					<div class="span1"  id="tag"></div>
					<div class="span2" style="padding-top:6px">
						<a href="" style="display:inline;font-size:20px;font-weight:bold;color:#fff">客户关系管理</a>
					</div>
					<div class="span6" id="outer">
						<a href="addContact.action" class="btn" style="margin-top:10px;">添加联系人</a>
						<a href="javascript:;" class="btn" style="margin-top:5px;" id="addtask">添加日程</a>
						<div class="box" style="display:none;">
					        <div class="abox">
					            <div class="a1"></div>
					            <div class="a2"></div>
					        </div>
					        <p style="font-size: 12px;">
					        	<form action="${basePath }/task/addTask.action" method="post" style="padding-left:20px;padding-right:5px;">
					        		<span><strong>添加一个日程</strong></span><br/>
					        		<input type="text" class="span3" name="task.task"><br/>
					        		
					        		<div class="control-group">
										<label class="control-label" for="inputPassword">什么时候完成?或者<a href="#" style="color:green" id="specifiedTime">选择具体时间</a></label>
										<div class="controls">
											<select style="margin-left:2px" name="abstractTime" id="selectTime">
												<option value="今天">今天</option>
												<option value="明天">明天</option>
												<option value="本周">本周</option>
												<option value="下周">下周</option>
												<option value="以后">以后</option>
										
											</select>
											
											<div style="display:none;" id="dateTime">
												<input type="text" class="span2"  name="specifiedTime" id="datepicker"  />
												<a href="#" style="color:green" id="cansel">取消</a>
											</div>
										</div>
										
									</div>
										<div class="control-group">
										<label class="control-label" for="inputPassword">选择一个类别</label>
										<div class="controls">
											<select style="margin-left:2px" name="category" class="span2">
												<option value="打电话">打电话</option>
												<option value="发邮件">发邮件</option>
												<option value="发传真">发传真</option>
												<option value="开会">开会</option>
												
										
											</select><a href="#" style="color:green">修改类别</a>
										</div>
										
									</div>
									<div class="control-group">
										<label class="control-label" for="inputPassword">谁可以看见这个日程</label>
										<div class="controls">
											<select style="margin-left:2px" name="task.views" class="span3">
												<option value="所有人">所有人</option>
												<option value="只有我">只有我</option>
												<option value="同组">我和同组的人</option>
												
										
											</select>
										</div>
										
									</div>
									<div style="border:1px solid #000;"></div>
									<input type="submit" class="btn btn-info" value="添加">
									<input  type="button" class="btn btn-info" value="取消" id="canseldiv">
					        	</form>
					        </p>
					    </div>
					</div>
					<div class="span3">
						<ul class="nav pull-right">
						    <li class="divider-vertical"></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 用户设置<b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">个人信息</a>
									</li>
									<li>
										<a href="#">修改密码</a>
									</li>
									<li>
										<a href="#">服务中心</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">安全退出</a>
							</li>
						</ul>
					
					
					</div>
				</div>
			</div>
		
		</div>
	
	</div>
	<div class="row-fluid" id="bodycontent">
	
		<div class="span3" style="height:400px">
				<div class="wall" style="padding:8px 0;">
					<ul class="nav nav-list" >
						<li class="nav-header" style="padding-top:0px">Welcome!</li>
						<li class="divider"><br></li>
						<li class="active"><a href="javascript:;"><i class="icon-white icon-home"></i>最新动态</a></li>
						<li><a href="contactlist.action"><i class="icon-user"></i>联系人</a></li>
						<li><a href="task/toCalendar.action"><i class="icon-leaf"></i>日程</a></li>
						<li><a href="deal.action"><i class="icon-gift"></i>交易</a></li>
						<li><a href="emails.action"><i class="icon-gift"></i>群发邮件</a></li>
					</ul>
				</div>
		</div>
	<div class="span6" style="background-color:#fff;height:700px;border:1px solid #ccc;border-radius:2px">
			<div class="wall" style="border-bottom:1px solid #ccc;">
				<div style="background-color:#f0f5f8;height:60px;padding-top:3px">
					<h3 style="padding-top:2px;padding-left:15px">最新动态</h3>
				</div>
				
			</div>
			<c:forEach items="${page.result }" var="m">
			<div class="activity">
				<div class="dealpic"></div>
				<div class="info">
					${m.content }<br/>
					${m.createtime }
				</div>
				<input type="hidden" value="${m.id }">
				<div class="del"><a href="#"><i class="icon-trash"></i></a></div>
			</div>
			</c:forEach>
			<div class="pagination" style="float:right;margin-bottom:0px;" id="navdiv">
				<ul>
					<c:choose>
						<c:when test="${page.pageNum == 1}">
							<li><a>Prev</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="home.action?p=${page.pageNum - 1 }">Prev</a></li>
						</c:otherwise>
					</c:choose>
					<c:choose>
						<c:when test="${page.pageNum == 1}">
							<li class="active"><a href="home.action?p=1">1</a></li>
						</c:when>
						<c:otherwise>
							<li ><a href="home.action?p=1">1</a></li>
						</c:otherwise>
					</c:choose>
					<c:choose>
						<c:when test="${page.pageNum == 2}">
							<li class="active"><a href="home.action?p=2">2</a></li>
						</c:when>
						<c:otherwise>
							<li ><a href="home.action?p=2">2</a></li>
						</c:otherwise>
					</c:choose>
					<c:choose>
						<c:when test="${page.pageNum == 3}">
							<li class="active"><a href="home.action?p=3">3</a></li>
						</c:when>
						<c:otherwise>
							<li ><a href="home.action?p=3">3</a></li>
						</c:otherwise>
					</c:choose>
					<c:choose>
						<c:when test="${page.pageNum == 4}">
							<li class="active"><a href="home.action?p=4">4</a></li>
						</c:when>
						<c:otherwise>
							<li ><a href="home.action?p=4">4</a></li>
						</c:otherwise>
					</c:choose>
					<c:choose>
						<c:when test="${page.pageNum == page.totalPages}">
							<li ><a>Next</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="home.action?p=${page.pageNum + 1 }">Next</a></li>
						</c:otherwise>
					</c:choose>
				</ul>		
			</div>
	</div>	
		
	</div>
	
	<script type="text/javascript" src="${basePath }/js/jquery.js"></script>
	<script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>	
    <script type="text/javascript" src="${basePath }/jquery-ui/js/jquery-ui-1.8.24.custom.min.js"></script> 
	<script type="text/javascript" src="${basePath }/jquery-ui/js/ui.datepicker-zh-CN.js"></script> 
	<script type="text/javascript">
		$(document).ready(function(){
			 $("#datepicker").datepicker({  
		        changeMonth: true, changeYear: true,  
		        showOn: 'button',   
		        buttonImage: 'img/calendar.gif',   
		        buttonImageOnly: true,  
		         minDate: '-2y', maxDate: '+2y'  
		    });  
		    $("#datepicker").datepicker('option', {dateFormat:"yy-mm-dd" });  
			$("#addtask").click(function(){
				$(".box").show();
			});
			$("#canseldiv").click(function(){
				$(".box").hide();
			});
			$("#specifiedTime").click(function(){
				$("#selectTime").hide();
				$("#dateTime").show();
			});
			$("#cansel").click(function(){
				$("#dateTime").hide();
				$("#selectTime").show();
			});
			$(".activity").live("mouseover",function(){
	
				$(this).children(".del").show();
				
			}); 
			$(".activity").live("mouseout",function(){
				$(this).find(".del").hide();
				
			});
			$(".del").click(function(){
				var id = $(this).prev().val();
				
				$(this).parent().remove();
				$.get("delMessage.action",{id:id});
			});
		});
	</script>
	
	
</body>
</html>